<template>
    <div class="con">
        <div v-for="(img,index) in list" :key="index" class="mb10 img_con">
            <van-icon name="cross" class="close" @click="deleteAction(index)" />
            <upload-img :fileType="fileType" :imgUrl.sync="img.url" :desc="showName + ' 第' + (index+1) + '张'"></upload-img>
        </div>
        <div v-if="list.length<maxCount" class="butt flex_center" @click="addOneAction">
            <van-cell :title="showName" value="点击添加" is-link></van-cell>
        </div>
        <action-sheet v-model="show" :actions="actions" @select="onSelect" cancel-text="取消" close-on-click-action @cancel="show=false" />
    </div>
</template>

<script>
import { ActionSheet } from 'vant';

import UploadImg from "@/components/form/upload-img";

export default {

    components: { UploadImg, ActionSheet },

    props: {
        showName: {
            type: String,
            default: ""
        },

        maxCount: {
            type: Number,
            default: 1
        },

        fileType: {
            type: String,
            default: ""
        }
    },

    data() {
        return {
            list: [],
            show: false,
            actions: [{ name: '相机', type: '1' }, { name: '相册', type: '2' }],
        }
    },

    methods: {
        getList() {
            return this.list.map(item => {
                return item.url
            });
        },

        setList(list) {
            this.list = list.map(item => {
                return {
                    url: item
                }
            })
        },

        deleteAction(index) {
            this.list.splice(index, 1);
        },

        // 
        addOneAction() {
            this.show = true;
            // this.$emit("update:imgUrl", "http://47.102.206.237/file/demo/banner1.jpg")
        },

        // 添加店铺环境
        onSelect(item) {
            this.show = false;
            this.$bridge.ImagePicker(item.type, '005').then(resp => {
                this.list.push({ url: resp });
            });
        },
    }


}
</script>

<style lang="scss" scoped>
.con {
    // padding: 10px;

    .mb10 {
        margin-bottom: 10px;
    }

    .img_con {
        position: relative;
        .close {
            position: absolute;
            right: 10px;
            top: 10px;
            z-index: 10;
            font-size: 20px;
        }
    }
}
</style>